/*
 * @Description: 账号管理
 * @Author: buwei.huang
 * @Date: 2019-11-20 15:34:42
 * @Last Modified by: zhenqiang.hong
 * @Last Modified time: 2019-12-20 17:38:51
 */

<template>
  <div id="app">
    <title-bar titleText="账号管理" />
    <div class="accountManage_wrap">
      <manage-item
        labelName="手机号"
        :isColor="true"
        :content="phone"
        letfWidth="2rem"
        style="color:#999999"
        @click.native="pushToBindPhonePage"
      >
        <div
          slot="item_right"
          class="icon iconfont icon-rightangel fontsize32"
          style="color:#CCCCCC"
        ></div>
      </manage-item>
      <manage-item
        v-if="isShowWeChaEntryt"
        labelName="微信"
        :content="filtrationName(nickName)"
        letfWidth="2rem"
        style="color:#999999"
        :isColor="showBtn === 2"
        :isRedColor="isRedColor"
      >
        <div
          v-if="showBtn === 1"
          slot="item_right"
          class="bindingBtn baseBgColorWithActive"
          @click="bindingWX()"
        >
          立即绑定
        </div>
        <div
          v-if="showBtn === 2"
          slot="item_right"
          class="relieveBindingBtn baseBtnBgWhiteActive"
          @click="relieveWX"
        >
          解绑
        </div>
      </manage-item>
      <manage-item
        :labelName="isSetPwd ? '修改登录密码' : '设置登录密码'"
        class="item_margin"
        style="color:#333333"
        @click.native="pushToPWDModifyPage"
      >
        <div
          slot="item_right"
          class="icon iconfont icon-rightangel fontsize32"
          style="color:#CCCCCC"
        ></div>
      </manage-item>
      <!-- 注销账号 -->
      <div
        class="logout_text fontsize32"
        @click="goPage"
      >
        注销账号
      </div>
    </div>
  </div>
</template>

<script>
import ManageItem from './components/ManageItem'
import { UserBeanUtils } from 'vue-xiaobu-utils'
import { TitleBar } from 'vue-xb-ui-depot'
import { bindWx, getBindState, unBindWx } from './api/api.js'
import ConfirmBox from '@/components/confirm/ConfirmBox.js'

const SHOW_NOBINDWX = 1
const SHOW_BINDWX = 2
const IS_BINDING = 'USER300004' // 已经绑定错误码

export default {
  components: {
    ManageItem,
    TitleBar
  },
  data() {
    return {
      showBtn: '',
      nickName: '', // 昵称
      isRedColor: false, // 昵称是否标红
      isSetPwd:
        UserBeanUtils.getUserInfo().ISSET_PASSWD === 1 ||
        UserBeanUtils.getUserInfo().ISSET_PASSWD === '1',
      phone: UserBeanUtils.getUserInfo().PHONE,
      isShowWeChaEntryt: window.isShowWeChaEntryt
    }
  },
  mounted() {
    this.getBindState()
    this.addEvent()
  },
  methods: {
    // 昵称超过显示省略号
    filtrationName(str) {
      if (str.length > 10) {
        return str.replace(/(.{10}).*/, '$1...')
      }
      return str
    },
    pushToBindPhonePage() {
      // 跳转到绑定手机的页面
      this.$AppRouterUtils.open('city-app/bindphone.html')
    },
    pushToPWDModifyPage() {
      // 跳转到修改密码的页面
      let url = this.isSetPwd
        ? 'city-app/modifyloginpwd.html'
        : 'city-app/setloginpwd.html'
      this.$AppRouterUtils.open(url)
    },
    // 微信绑定
    bindingWX(mustBind = false) {
      this.$ThirdParty.then(ThirdParty => {
        ThirdParty.doAuthorizedLogin(
          'Wechat',
          msg => {
            let wxInfo = JSON.parse(msg)
            bindWx(
              wxInfo.unionid,
              wxInfo.nickname,
              // wxInfo.openid,
              wxInfo.unionid, // 后台需要openid这个值跟unionid一样
              wxInfo.country,
              wxInfo.province,
              wxInfo.city,
              wxInfo.sex,
              wxInfo.headimgurl,
              mustBind
            )
              .then(res => {
                this.$Toast.then(Toast => {
                  Toast.showShortBottom('绑定成功')
                  setTimeout(() => {
                    this.refreshPage()
                  }, 500)
                })
              })
              .catch(err => {
                console.dir(err)
                console.log(
                  '已经绑定' +
                  JSON.stringify(err.error.data.RSPCD)
                )
                if (err.error.data.RSPCD === IS_BINDING) {
                  this.compelBindingWX()
                } else {
                  this.$Toast.then(Toast => {
                    Toast.showShortBottom('绑定失败，请稍后重试')
                  })
                }
              })
          },
          err => {
            console.log(err + 'error')
          }
        )
      })
    },
    // 是否强制绑定
    compelBindingWX() {
      // this.$UI.then(UI => {
      //   UI.showDialog(
      //     '提示',
      //     '该微信号已与其他手机号绑定，是否绑定到当前手机号？',
      //     '是',
      //     '否',
      //     msg => {
      //       if (msg == 0) { //eslint-disable-line
      //         this.bindingWX(true)
      //       }
      //     },
      //     function (msg) { }
      //   )
      // })
      ConfirmBox.show({
        title: '提示',
        message: '该微信号已与其他手机号绑定，是否绑定到当前手机号？',
        confirmText: '是',
        cancelText: '否'
      }).then(() => {
        console.log('点击了确定~')
        this.bindingWX(true)
      })
    },
    // 解除微信绑定
    relieveWX() {
      console.log('解除绑定')
      // this.$UI.then(UI => {
      //   UI.showDialog(
      //     '提示',
      //     '解绑后，将无法使用微信账号登录唐山行',
      //     '继续解绑',
      //     '再想想',
      //     msg => {
      //       if (msg == 0) {  //eslint-disable-line
      //         unBindWx()
      //           .then(() => {
      //             this.$Toast.then(Toast => {
      //               Toast.showShortBottom('解绑成功')
      //               setTimeout(() => {
      //                 this.refreshPage()
      //               }, 500)
      //             })
      //           })
      //           .catch(err => {
      //             console.dir(err)
      //             this.$Toast.then(Toast => {
      //               Toast.showShortBottom('解绑失败，请稍后重试')
      //             })
      //           })
      //       }
      //     },
      //     function (msg) { }
      //   )
      // })
      ConfirmBox.show({
        title: '提示',
        message: '解绑后，将无法使用微信账号登录唐山行',
        confirmText: '继续解绑',
        cancelText: '再想想'
      }).then(() => {
        console.log('点击了确定~')
        unBindWx()
          .then(() => {
            this.$Toast.then(Toast => {
              Toast.showShortBottom('解绑成功')
              setTimeout(() => {
                this.refreshPage()
              }, 500)
            })
          })
          .catch(err => {
            console.dir(err)
            this.$Toast.then(Toast => {
              Toast.showShortBottom('解绑失败，请稍后重试')
            })
          })
      })
    },
    addEvent() {
      document.addEventListener('resume', () => {
        this.isSetPwd =
          UserBeanUtils.getUserInfo().ISSET_PASSWD === 1 ||
          UserBeanUtils.getUserInfo().ISSET_PASSWD === '1'
        this.phone = UserBeanUtils.getUserInfo().PHONE
      })
    },
    // 刷新页面
    refreshPage() {
      this.showBtn = SHOW_NOBINDWX
      this.nickName = ''
      this.isRedColor = false
      this.getBindState()
    },
    // 获取微信绑定状态
    getBindState() {
      getBindState().then(res => {
        if (res) {
          this.nickName = res.NICK_NAME
          this.showBtn = SHOW_BINDWX
          if (res.IS_RED === '0' || res.IS_RED === 0) { // 判断是否标红
            this.isRedColor = true
          } else {
            this.isRedColor = false
          }
        } else {
          this.nickName = '未绑定'
          this.showBtn = SHOW_NOBINDWX
        }
      })
    },
    // 跳转账号注销
    goPage() {
      this.$AppRouterUtils.open('city-app/accountLogout.html?_tv=false')
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
.title-text {
  color: #333;
}
.accountManage_wrap {
  padding-top: 16px;
  position: relative;
  box-sizing: border-box;
  background-color: #f2f5f6;
}
.bindingBtn {
  width: 160px;
  height: 52px;
  color: #fff;
  border-radius: 26px;
  text-align: center;
  line-height: 52px;
}
.relieveBindingBtn {
  width: 120px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  border: 1px solid #999999; /*no*/
  border-radius: 26px;
  box-sizing: border-box;
  color: #999999;
}
.item_margin {
  margin-top: 16px;
}
.logout_text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 60px;
  color: #999999;
}
</style>
